# Collapsible

<Subtitle>A collapsible panel controlled by a button.</Subtitle>
<Meta
  name="description"
  content="A high-quality, unstyled React collapsible component that displays a panel controlled by a button."
/>

import { DemoCollapsibleHero } from './demos/hero';

<DemoCollapsibleHero />

## Anatomy

Import the component and assemble its parts:

```jsx title="Anatomy"
import { Collapsible } from '@base-ui-components/react/collapsible';

<Collapsible.Root>
  <Collapsible.Trigger />
  <Collapsible.Panel />
</Collapsible.Root>;
```

## API reference

<Reference component="Collapsible" parts="Root, Trigger, Panel" />
